<template>
  <div>
    <div class="section">
      <div class="tlt">申请信息：</div>
      <el-row>
        <el-col :span="6">
          <span>申请人姓名：</span><span>{{orderInfo.partnerName}}</span>
        </el-col>
        <el-col :span="6">
          <span>申请人手机号码：</span><span>{{orderInfo.partnerMobile}}</span>
        </el-col>
        <el-col :span="6">
          <span>收货人姓名：</span><span>{{orderInfo.receiver}}</span>
        </el-col>
        <el-col :span="6">
          <span>收货人手机号：</span><span>{{orderInfo.receiverMobile}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>收货人详细地址：</span><span>{{orderInfo.address}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>申请原因：</span><span>{{orderInfo.reason}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>物业合同：</span><span>12121212</span>
        </el-col>
      </el-row>
      <el-table :border="true" :data="dataList" style="width: 400px">
        <el-table-column label="充电桩型号" prop="name"></el-table-column>
        <el-table-column label="台数" prop="count"></el-table-column>
      </el-table>
    </div>
    <div class="section">
      <div class="tlt">配货信息({{inputCodeList.length}}/{{orderInfo.totalCount}})</div>
      <div>
        <ul>
          <li v-for="(code,index) in inputCodeList" :key="index">{{code}}</li>
        </ul>
      </div>
      <el-input type="textarea" placeholder="输入外壳编号" v-model="inputCode" @keyup.enter.native="inputCode_Change" :autosize="{minRows: 4, maxRows: 8}"></el-input>
      <div style="display:flex;justify-content: center;margin-top: 30px">
        <el-button type="primary" @click="save" :loading="loading">发货</el-button>
        <el-button @click="back">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'deliverPile',
    data () {
      return {
        id: '',
        dataListLoading: false,
        dataList: [],
        orderInfo: {},
        inputCode: '',
        inputCodeList: [],
        loading: false
      }
    },
    mounted () {
      this.id = this.$route.query.id
      this.getPileInfo(this.id)
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getPileInfo (id) {
        this.$http({
          url: this.$http.adornUrl('/v1/apply/charging/get'),
          method: 'get',
          params: this.$http.adornParams({
            id: id
          })
        }).then(({ data }) => {
          console.log(data,"申请数据")
          this.orderInfo = data.data
          this.dataList = data.data.applyChargingDetailList
        })
      },

      validateShellId (shellId) {
        this.$http({
          url: this.$http.adornUrl('/v1/apply/charging/verify'),
          method: 'get',
          params: this.$http.adornParams({
            applyChargingId: this.orderInfo.id,
            shellId: shellId
          })
        }).then(({ data }) => {
          if(data.code == 1017) {
            this.$message.error(data.msg)
          }
          else {
            let index = this.inputCodeList.indexOf(shellId)
            if(index >= 0) {
              this.$message.error('已添加')
            }
            else {
              this.inputCodeList.push(shellId)
            }
          }
        })
      },

      inputCode_Change () {
        if(this.inputCodeList.length>=this.orderInfo.totalCount){
          this.$message.error('不能超过发货数')
          return
        }
        let data = ''
        if(this.inputCode.indexOf('http')>-1||this.inputCode.indexOf('https')>-1){
          data = this.inputCode.split('shell=')[1]
          data = data.replace(/(^\s*)|(\s*$)/g, '')
        }
        else {
          data=this.inputCode
        }
        if(data) {
          this.validateShellId(data)
          this.inputCode = ''
        }
        else {
          this.$message.error('请输入正确的充电桩编号')
          this.inputCode = ''
        }
      },

      save () {
        if(this.inputCodeList.length == 0) {
          this.$message.error('请录入充电桩编号')
          return
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl('/v1/apply/charging/delivery'),
          method: 'post',
          data: this.$http.adornData({
            id: this.id,
            shellIdList: this.inputCodeList
          })
        }).then(({ data }) => {
          this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.back()
              }
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .section{
    margin: 20px;
  }
  .tlt{
    color: #333333;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .el-row{
    margin-bottom: 20px;
  }
  .el-col>span:first-child{
    color: #666666;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  ul li{
    list-style-type:none;
    padding-right: 15px;
    white-space:nowrap;
    display:block;
    margin-bottom: 10px;
  }
</style>
